<template>
    <view class="page_root" data-page-name="学习" data-page-identification="a_70436rpdup">
      <!-- UNI_APP_EXEGESIS_START NAVIGATION_TEMPLATE UNI_APP_EXEGESIS_END -->
      <!-- begin vid_1jpadaplo1 自定义模板_6a72bobbxx -->
      <view class="main">
        <view class="bgc-img"></view>
        <view class="top-tip">
          <view class="top-icon"><u-icon name="info-circle-fill" color="#F7B500" size="24px"></u-icon></view>
          <view class="top-content"> 考试不合格将扣除个人最终绩效分数 </view>
        </view>
        <view class="main-content">
          <view class="question-bottom-inner">
            <view class="question-item" v-for="(finishQ,finishQindex) in taskState.finishQList" :key="finishQindex">
              <view class="question-title"> 题目来源 </view>
              <view class="question-content"> 完成标准 </view>
              <view class="question-title"> 题目 </view>
              <view class="question-content">
                <view v-html=" formatText(finishQ.studyQuestion) "></view>
              </view>
            </view>
            <view class="question-item" v-for="(sopQ,sopQindex) in taskState.sopQList" :key="finishQindex">
              <view class="question-title"> 题目来源 </view>
              <view class="question-content"> SOP </view>
              <view class="question-title"> 题目 </view>
              <view class="question-content">
                <view v-html=" formatText(sopQ.studyQuestion) "></view>
              </view>
            </view>
          </view>
        </view>
        <view class="fixed-button" @click="handleJumpExam(taskState.taskId)">
          <view class="btn-father">
            考试
            <view class="btn-tip"
              ><span class="count">考试不通过{{ taskState.examFailNumber }}次</span></view
            >
          </view>
        </view>
      </view>
      <!-- end vid_1jpadaplo1 自定义模板_6a72bobbxx -->
    </view>
  </template>
  <script setup>
  
    import {
      ref,reactive,toRaw,markRaw,
      watch,computed,
      onBeforeMount,onMounted,onBeforeUnmount,onUnmounted,onActivated,onDeactivated,getCurrentInstance
    } from "vue";
    import { useRoute } from 'vue-router';
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, localGet, traversalTreeStructure, set, checkCaseCondition, throttle, merge, debounce, getGridStyle, getCellRenderAble, formulaStrategy } from '@/utils/index';
    import { isEqual, isNullOrEmpty, isEmptyArr, isArray, isEmpty, isNullOrUnDef, isContained } from '@/utils/is';
    import { CovertOptions, getChartsDataSourceConvert } from '@/utils/chart';
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format';
    import { FormFormat } from '@/utils/formFormat'
    import { customAddWaterMarkFunc, generateWaterMarkText } from '@/utils/addWaterMark';
    import dayjs from 'dayjs';
    import hashSum from 'hash-sum';
    import { handleRedirect } from '@/utils/common';
    import { onPullDownRefresh, onLoad, onReady, onShow, onHide, onPageScroll, onUnload } from '@dcloudio/uni-app';
    /*** UNI_APP_EXEGESIS ***
    import { handleRedirect, permission, parseJson } from '@/utils/common';
    import { onPullDownRefresh, onLoad, onReady, onShow, onHide, onPageScroll, onUnload } from '@dcloudio/uni-app';
    import { BroadcastMessage } from '@/utils/BroadcastMessage';
    import { sendToken } from "@/hooks/useIframeToken";
    *** UNI_APP_EXEGESIS ***/
  
  
    // ---------------------------- 属性定义 ----------------------------
    const sourceId = "page3000000331"
  
      // 是否显示菜单按钮
      const isMenuIconShow = false;
      // NAVIGATION_MENU
      const handleShowNavigation = ()=>{};
  
      let isProcessState = ref(false);
  
  
    const setTimeOutList = [];
  
  
        const vid_1jpadaplo1_props = reactive({
          code: "      <view class=\"main\">\n        <view class=\"bgc-img\"></view>\n        <view class=\"top-tip\">\n          <view class=\"top-icon\"><u-icon name=\"info-circle-fill\" color=\"#F7B500\" size=\"24px\"></u-icon></view>\n          <view class=\"top-content\"> 考试不合格将扣除个人最终绩效分数 </view>\n        </view>\n        <view class=\"main-content\">\n          <view class=\"question-bottom-inner\">\n          <view class=\"question-item\" v-for=\"(finishQ,finishQindex) in taskState.finishQList\" :key=\"finishQindex\">\n            <view class=\"question-title\">\n                题目来源\n            </view>\n            <view class=\"question-content\">\n                完成标准\n            </view>\n            <view class=\"question-title\">\n                题目\n            </view>\n            <view class=\"question-content\">\n                <view  v-html=\" formatText(finishQ.studyQuestion) \"></view>\n            </view>\n        </view>\n        <view class=\"question-item\" v-for=\"(sopQ,sopQindex) in taskState.sopQList\" :key=\"finishQindex\">\n            <view class=\"question-title\">\n                题目来源\n            </view>\n            <view class=\"question-content\">\n                SOP\n            </view>\n            <view class=\"question-title\">\n                题目\n            </view>\n            <view class=\"question-content\">\n                <view  v-html=\" formatText(sopQ.studyQuestion) \"></view>\n            </view>\n        </view>\n          </view>\n        </view>\n        <view class=\"fixed-button\" @click=\"handleJumpExam(taskState.taskId)\">\n          <view class=\"btn-father\">\n            考试\n            <view class=\"btn-tip\"\n              ><span class=\"count\">考试不通过{{ taskState.examFailNumber }}次</span></view\n            >\n          </view>\n        </view>\n      </view>",
      });
  
  
  
    // ============================ 属性定义 ============================
  
    // ---------------------------- 元素数据引用 ----------------------------
    // 组件 自定义模板_6a72bobbxx ref 的引用
    const vid_1jpadaplo1_ref = ref(null);
    // 动态key的map
    const fieldTypeMap = {};
    // 动态key的map
    const refMap = {vid_1jpadaplo1_ref};
  
    const showState = reactive({
        vid_1jpadaplo1_visible: true,
    })
    // ============================ 元素数据引用 ============================
  
    // ---------------------------- 数据 ----------------------------
  
  
    // ============================ 数据 ============================
  
    // ---------------------------- 方法 ----------------------------
    // ---------------------------- 页面数据 ----------------------------
  
  
    // ============================ 页面数据 ============================
  
    // ---------------------------- 响应 ----------------------------
  
    // ============================ 响应 ============================
  
    // ---------------------------- 函数 ----------------------------
  
    // 自定义函数 返回上一页
    const customFunction_goBack_tvi7pw7l1b =  (...params) => {
      uni.navigateBack()
    }
  
    // ============================ 函数 ============================
  
    // ---------------------------- 页面参数 ----------------------------
  
    const pageParameter_state = reactive({
        'processInstanceId': undefined,
    })
  
    // ============================ 页面参数 ============================
  
    // ---------------------------- 组件事件处理方法 ----------------------------
  
  
    // ============================ 组件事件处理方法 ============================
  
    // ============================ 方法 ============================
  
    // ---------------------------- 生命周期 ----------------------------
    /*** UNI_APP_EXEGESIS ***
        // 获取上一层传递的数据
        const workflowChannel = new BroadcastMessage('WORKFLOW');
        workflowChannel.publish({ status: 'Ready' });
        workflowChannel.subscribe((data) => {
          if (data) {
            isProcessState.value = (window.self !== window.parent && data.type === 'hideHeader');
          }
        });
        *** UNI_APP_EXEGESIS ***/
  
  
    const pageScrollTop = ref(0)
  
    // *** PREVIEW_EXEGESIS ***
    onMounted(() => {
      setPageParams(route.query)
      // 设置表单的rule
      try{
  
      }catch{
          // do nothing
      }
    });
    // *** PREVIEW_EXEGESIS *** //
  
    /*** UNI_APP_EXEGESIS ***
    const routeOption = ref({})
    onLoad((option) => {
      routeOption.value = option;
    });
    onReady(() => {
      setPageParams(routeOption.value)
      // 设置表单的rule
      try{
  
      }catch{
          // do nothing
      }
    });
    // 图表刷新标记
    const uChartsReshowFlag = ref(false);
    onHide(() => { // 页面隐藏后标记置为false(如果不置为false无法触发图表更新)
        uChartsReshowFlag.value = false
    })
    onShow(() => {
        uChartsReshowFlag.value = true; // 页面激活后,标记置为true
  
        setPageParams(routeOption.value)
    })
    onPageScroll(e => {
        pageScrollTop.value = e.scrollTop
    });
    *** UNI_APP_EXEGESIS ***/
  
    const setPageParams = (routerParam)=>{
      const pageParams = [{"dataType":"STRING","dependencies":[],"name":"processInstanceId"}];
      const strategyMap = {
        STRING: (param, paramValue) => {
          pageParameter_state[param.name] = paramValue;
        },
        BOOLEAN: (param, paramValue) => {
          if('true' === (paramValue || '').toLowerCase()) {
            pageParameter_state[param.name] = true
          } else if('false' === (paramValue || '').toLowerCase()) {
            pageParameter_state[param.name] = false
          } else {
            // TODO: 是否要支持toast
            console.error('参数传入错误！类型不匹配！');
          }
        },
        NUMBER: (param, paramValue) => {
          if (!isNaN(paramValue)) {
            pageParameter_state[param.name] = Number(paramValue);
          } else {
            // TODO: 是否要支持toast
            console.error('参数传入错误！类型不匹配！');
          }
        },
        ARRAY: (param, paramValue) => {
          if (isNullOrUnDef(paramValue) || !paramValue || paramValue=== 'undefined') { // default value
            pageParameter_state[param.name] = [];
          } else if(paramValue.trim().startsWith('[') && paramValue.trim().endsWith(']')) {
            try {
              pageParameter_state[param.name] = JSON.parse(decodeURI(paramValue));
            } catch (error) {
              console.error('参数解析失败 ',error);
            }
          } else {
            console.error('参数传入错误！类型不匹配！');
          }
        },
      };
      pageParams.forEach((param) => {
        strategyMap[param.dataType](param, routerParam[param.name])
      });
  
  
    }
  
    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });
  
  
    /*** UNI_APP_EXEGESIS ***
    onPullDownRefresh(() => {
      // 下拉刷新
      setTimeout(() => {
          uni.stopPullDownRefresh()
      }, 1000)
    })
    *** UNI_APP_EXEGESIS ***/
  
    // ============================ 生命周期 ============================
  
    // ---------------------------- 数据关联处理 ----------------------------
    // ---------------------------- 组件数据同步 ----------------------------
  
    // ============================ 组件数据同步 ============================
    //
    // ============================ 数据关联处理 ============================
  
    // ---------------------- 不同组件自定义的处理逻辑 ---------------------
  
    // ====================== 不同组件自定义的处理逻辑 ======================
  
  
    // ================================定制化逻辑========================================
    onMounted(() => {
            let appDiv = document.querySelector('#app')
            appDiv.style.background = 'linear-gradient(180deg, #E1EFFD 100%, #ffffff 0%)';
            let topHeader = document.querySelector('.uni-page-head');
            if (topHeader) topHeader.remove()
            let bottomTab = document.querySelector('.vid_dur3o27gyj')
            if (bottomTab) bottomTab.remove()
            // 获取当前 URL 中问号后的参数部分
            const queryString = window.location.search
  
            // 使用 URLSearchParams 解析参数字符串
            const urlParams = new URLSearchParams(queryString)
  
            // 遍历参数并输出
            urlParams.forEach((value, key) => {
            })
            const taskId = urlParams.get('id')
            taskState.taskId = taskId
            // 获取任务详情
            get(`/solution-ppm/api/v2/built-in-system-ppm/dashboard/task/${taskId}`).then(({ data }) => {
                taskState.examFailNumber = data.examFailNumber || 0
                handleStart()
            })
        })
        const taskState = reactive({
            isExam: false,
            taskId: '',
            questionList: [],
            tabList: [],
            current: 0,
            showData: {
            },
            examFailNumber: 0,
            sopQList:[],
            finishQList:[]
        })
  
        function tabChange(index) {
            taskState.current = index;
            taskState.showData = taskState.questionList[index]
        }
        // const handleStart = () => {
        //     taskState.isExam = false;
        //     taskState.currentTaskId = taskState.taskId;
        //     taskState.examFailNumber = taskState.examFailNumber || 0;
  
        //     get(`/solution-ppm/api/v2//built-in-system-ppm/project/task_question/${taskState.taskId}/study`).then(res => {
        //         console.log(res);
        //         taskState.questionList = res.data.phenomenonList || []
        //           // 测试
        //     for (let i = 0; i < taskState.questionList.length; i++) {
        //         taskState.tabList.push({ name: '题目' + i })
        //     }
        //     taskState.showData = taskState.questionList[0]
        //     // 测试
        //     })
        // }
        const handleStart = () => {
            taskState.isExam = false;
            taskState.currentTaskId = taskState.taskId;
            taskState.examFailNumber = taskState.examFailNumber || 0;
  
            post(`/solution-ppm/api/v2/built-in-system-ppm/task/faq/study/search`,{taskId:taskState.currentTaskId}).then(
          res => {
            if(res.data.taskQuestionFinishStandardList?.length||res.data.taskQuestionSopList?.length){
              taskState.sopQList =res.data.taskQuestionSopList
              taskState.finishQList =res.data.taskQuestionFinishStandardList
            }else{
              message.success('已开始该任务，请及时完成任务')
              taskState.currentTaskId = null
            }
          }
        )
        }
        const formatText = (text) => {
            // 这里放置文本格式化的逻辑
            return text?.replace(/\n/g, '<br>');
        };
        function handleJumpExam(id) {
          handleRedirect(`/pages/Page3000000332/Page3000000332?id=${id}`)
        }
  </script>
  <style lang="less" scoped>
    .page_root {
        min-height: 100%;
        box-sizing: border-box;
    }
  
  
    .page_root {
            min-height: 100%;
            box-sizing: border-box;
        }
  
  
        .page_root {
            min-height: 100%;
            box-sizing: border-box;
            background: linear-gradient(180deg, #E1EFFD 100%, #ffffff 0%);
        }
  
        .main {
            height: calc(100vh - 50px);
            background: linear-gradient(180deg, #E1EFFD 100%, #ffffff 0%);
            padding: 15px 15px 0 15px;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            position: relative;
            overflow: auto;
            padding: 15px;
        }
  
        .bgc-img {
            position: absolute;
            width: 100%;
            height: 300px;
            left: 0;
            top: -230px;
            background-image: url('http://10.40.0.33:9001/file-storage/416680575854426112.png');
            background-size: cover;
        }
  
        .top-tip {
            background: #FFFBE6;
            border: 1px solid #FFE58F;
            border-radius: 2px;
            display: flex;
            width: 100%;
            height: 40px;
            position: relative;
            padding: 8px 10px;
        }
  
  
  
        .top-icon {
            width: 10%;
        }
  
        .top-content {
            height: 24px;
            flex: 1;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #262626;
            letter-spacing: 0;
            text-align: justify;
            font-weight: 400;
            line-height: 24px;
        }
  
        .main-content {
            overflow: hidden;
            border-radius: 6px 6px 0 0;
            margin-top: 15px;
        }
  
        .tabs {
            width: 100%;
            display: flex;
            margin-top: 15px;
            position: relative;
            box-shadow: 0 0 10px 0 #CFE7FF;
            background: #FFFFFF;
            border-radius: 6px 6px 0 0;
            height: 50px;
            padding: 12px 16px;
            overflow-x: auto; /* 添加水平滚动 */
            white-space: nowrap; /* 防止换行 */
        }
  
        .tabs-item {
            position: relative;
            width: 25%;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #595959;
            font-weight: 400;
            height: 20px;
            line-height: 30px;
            font-weight: 600;
            text-align: center;
            margin-right: 10px;
        }
        .indicator {
            top: 25px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50%; /* Adjust the width of the indicator according to your design */
            height: 1px; /* Adjust the height of the indicator according to your design */
            background-color: #0078FF;
            display: none; /* Initially hide the indicator */
            border: 1px solid #0078FF;
        }
        .active .indicator {
            display: block; /* Display the indicator when tabs-item has active class */
        }
        .active {
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: #0078FF;
            font-weight: 600;
        }
  
        .question-item {
            background: #FFFFFF;
            border-radius: 6px 6px 0 0 ;
            padding: 5px 15px 5px 15px;
            border-bottom: 1px solid #A6C2E4;
        }
  
        .question-title {
            font-family: PingFangSC-Semibold;
            font-size: 16px;
            color: #008BFF;
            font-weight: 600;
            margin:5px 0;
        }
  
        .question-top-main {
            line-height: 22px;
        }
  
        .question-item-icon {
            position: relative;
            top: 2px;
        }
  
        .top-text-15 {
            margin-top: 15px;
        }
  
        .top-text-12 {
            margin-top: 12px;
        }
  
        .top-text-16 {
            margin-top: 16px;
        }
  
        .top-text-8 {
            margin-top: 8px;
        }
  
        .h1-title {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #008BFF;
            font-weight: 400;
        }
  
        .question-bottom {
            background: #FFFFFF;
            box-shadow: 0 0 10px 0 #CFE7FF;
            border-radius: 3px;
            overflow: hidden;
        }
  
        .question-bottom-inner {
            border: 3px solid;
            border-image: linear-gradient(360deg, rgba(41, 129, 223, 0) 0%, rgba(41, 129, 223, 1) 100%) 3 3 3 3;
            height: 100%;
            border-radius: 0 0 6px 6px;
        }
  
        .question-bottom-title {
            position: relative;
            ;
            left: -16px;
            width: 100%;
            height: 28px;
            background-image: linear-gradient(90deg, #CDE8FD 0%, rgba(205, 232, 253, 0.00) 100%);
            font-family: PingFangSC-Semibold;
            font-size: 14px;
            color: #262626;
            font-weight: 600;
            line-height: 28px;
            padding: 0 14px;
        }
  
        .question-bottom-title-bottom {
            position: relative;
            ;
            left: -16px;
            width: 100%;
            height: 28px;
            background-image: linear-gradient(90deg, #CDE8FD 0%, rgba(205, 232, 253, 0.00) 100%);
            font-family: PingFangSC-Semibold;
            font-size: 14px;
            color: #262626;
            font-weight: 600;
            line-height: 28px;
            padding: 0 14px;
            margin-bottom: 20px;
            top: 20px;
        }
  
        .fixed-button {
            position: fixed;
            height: 52px;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #1777FF;
            color: #fff;
            font-size: 20px;
            font-weight: 600;
            text-align: center;
            border: none;
            border-radius: 0;
            z-index: 12;
            line-height: 52px;
            font-family: PingFangSC-Semibold;
            font-size: 20px;
            color: #FFFFFF;
            letter-spacing: 0;
            font-weight: 600;
        }
  
        .btn-tip {
            background: #FFFFFF;
            border-radius: 10px 10px 10px 0;
            width: 90px;
            height: 18px;
            position: absolute;
            top: 5px;
            right: -90px;
            display: flex;
            /* 添加 flex 属性 */
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
        }
  
        .count {
            display: inline-block;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #F5222D;
            text-align: center;
            /* 将 text-align 属性修改为 center */
            font-weight: 400;
        }
  
  
        .btn-father {
            margin: 0 auto;
            width: 40px;
            position: relative;
        }
  
  
  
        /*
        新faq样式2
        */
        .question-content{
            font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #262626;
    font-weight: 500;
    text-align: left;
        }
  </style>
  